You can use templates to create documents that have a common structure and appearance. Templates are useful when you want to make sure that all of the pages in a site share certain characteristics.
Once you apply a single template to a group of pages, you can edit information on the group of pages by editing the template and then reapplying it to those pages. While elements unique to each page (such as text describing an item for sale) remain unchanged, common template elements (such as navigation bars) are updated on all of the pages that use the template.
The Scaal products page links to several product pages that describe products Scaal offers for sale. You'll use an existing product page to create a template. Using a template ensures that your product pages will have an identical layout and format.
In this section, you'll create a template from an existing product page and then use the template to create new product pages.
Begin by viewing the Scaal compact disc product page in a browser.
1 | In the Site window, in the Local Folder list, locate the icon for the product_cd.html file, and then double-click the icon to open the file in Dreamweaver. |
2 | Press F12 to preview the page in a browser window.
![]() |
3 | Close the browser when you finish viewing the page. |
4 | Close the products_cd.html file. |
![]() |
You'll create a template from the tutorial version of the Scaal compact disk product page. You'll then use this template to create additional product pages.
1 | In the Site window, in the Local Folder list, double-click the icon for DW3_products_cd.html to open the file. |
2 | Choose File > Save as Template. |
The Save As Template dialog box appears.
![]() |
|
The existing template, product_page, was created for and applied to the completed Scaal site product pages. You'll create your own version of this template. | |
3 | In the Save As field, change the template name: type my_product_page, and then click Save. |
A new document appears in the Document window. Notice the Template identifier as well as the file extension .dwt.
![]() |
|
![]() |
At this point, your new template is the same as the page from which you saved the template. The layout for certain page areas need to be the same on each product page: the product photo, product name, product description, and product price. You'll see how to define these areas in your template.
Each template contains both locked and editable regions. Locked regions can be edited only inside the template itself; they appear in a highlight color on all pages the template is applied to. Editable regions are placeholders for the content that is unique to each page the template is applied to. In an applied template, the editable regions are highlighted.
1 | In the my_product_page.dwt template in the Document window, select and delete the compact disc image; then type Insert image here in the table cell. |
2 | Select the text you just typed.
![]() |
3 | Choose Modify > Templates > New Editable Region. |
The New Editable Region dialog box appears. | |
4 | In the Name field, type Image as the name for this region of the template.
![]() |
5 | Click OK. |
Notice the text is now highlighted, indicating this is an editable region of the template. | |
6 | In the Document window, select "Scaal Sound," then choose Modify > Templates > New Editable Region to make this an editable region in the template. |
7 | In the Name field in the New Editable Region dialog box, type Name and click OK. |
In the Document window, the region is highlighted and identifiable by the region name you gave it. | |
8 | In the Document window, select the product description text, and then choose Modify > Templates > New Editable Region to make this an editable section of the template. |
9 | In the Name field in the New Editable Region dialog box, type Description and click OK. |
In the Document window, the region is highlighted and identifiable by the region name you gave it. | |
10 | Choose File > Save to save your template. |
The Update Pages dialog box appears, asking if you want to update all the documents in your local site. Selecting Yes would update the pages in the completed Scaal site, which you don't want to do. | |
11 | Click No, and then click Close to close the Update Pages dialog box. |
12 | Close the template. |
![]() |
Now you'll use the template to create a new product page.
1 | Choose File > New from Template. |
The Select Template dialog box appears.
![]() |
|
2 | In the Templates list, select my_product_page as the template to apply, and then click Select. |
A new untitled document appears.
![]() |
|
The darker regions of the document are editable; all other regions of the document are locked and cannot be edited. | |
3 | Save your document, and name the file my_products_mug.html. |
![]() |
With the editable regions set, updating pages is easy. You'll replace the placeholder text with an image, and add text to create Scaal's Commuter Mug product page.
1 | Place the insertion point in the Image region. |
2 | Choose Insert > Image, and in the dialog box that appears select mug.jpg. Then click Select (Windows) or Choose (Macintosh) to select the image. |
3 | Delete the Image placeholder "Insert image here" text. |
4 | In the Document window, in the Name region, type a name for the product, such as Commuter Mug, and delete the placeholder. |
5 | In the Document window, in the Description region, type some descriptive text about the mug and delete the placeholder. |
6 | Save your document. |
7 | Close the document. |
![]() |
In the next section of the tutorial, you'll link product page documents to Scaal's main products page. The product pages you'll link were created using a similar template.